<template>
	<view class="content">
		<image :src="buildInfo.thumb" class="image"></image>
		<view class="information">
			<view class="building">
				<view class="building_line"></view>
				<view class="building_text">基本信息</view>
				<image src="../../static/images/icon/share_icon.png" class="building_image"></image>
			</view>
			<view class="information_item">
				<view class="information_item_txt">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</view>
				<view class="information_item_txt">{{buildInfo.area.name}}</view>
			</view>

			<view class="information_item">
				<view class="information_item_txt">楼盘名称:</view>
				<view class="information_item_txt">{{buildInfo.name}}</view>
			</view>

			<view class="information_item">
				<view class="information_item_txt">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型 :</view>
				<view class="information_item_txt">{{buildInfo.model.name}}²</view>
			</view>
		</view>
		<view class="geographical_position">
			<view class="building">
				<view class="building_line"></view>
				<view class="building_text">地理位置</view>
			</view>
			<map style="width: 100%; height: 500rpx;margin-top: 40rpx;" :latitude="buildInfo.latitude"
				:longitude="buildInfo.longitude" :markers="covers" @click="getmapdetails()"></map>
		</view>
		<view class="example">
			<view class="building">
				<view class="building_line"></view>
				<view class="building_text">案例展示</view>
			</view>
			<view class="example_item" v-for="item in 4" @click="tocase()">
				<image class="example_item_image" src="../../static/loupan_item.png"></image>
				<view class="example_item_text">
					<view class="lines"></view>
					30m²
					<view class="lines"></view>
				</view>
			</view>
			<button class="appointment_button">确定预约</button>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildInfo: {},
				// caseList:[],
				covers: {}
			}
		},
		methods: {
			getmapdetails() {
				uni.openLocation({
					latitude: this.buildInfo.latitude,
					longitude: this.buildInfo.longitude,
					name: this.buildInfo.name,
					success() {
						console.log("导航成功")
					},
					fail() {
						console.log(error)
					}
				})
			},
			tocase() {
				uni.navigateTo({
					url: "/pages/building/buildingcase/buildingcase"
				})
			},
			show(e) {
				var then = this
				this.$http.post("/system/getBuildDetail", {
					id: e
				}).then(res => {
					console.log(res)
					then.buildInfo = res.data.data.buildInfo
					then.buildInfo.latitude = parseFloat(then.buildInfo.latitude)
					then.buildInfo.longitude = parseFloat(then.buildInfo.longitude)
					// then.caseList=res.data.data.caseList
					then.covers = [{
						"id": 0,
						"latitude": then.buildInfo.latitude,
						"longitude": then.buildInfo.longitude,
						"width": 30,
						"height": 30,
						"iconPath": "/pages/static/images/icon/markers.png"
					}]
				})

			}
		},
		onLoad(e) {
			this.show(e.id)
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0 auto;
		padding: 0 0;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}

	.image {
		width: 375px;
		height: 225px;
	}

	.building {
		width: 375px;
		height: 28px;
		top: 14px;
		left: 5px;
		position: relative;
	}

	.building_line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		position: absolute;
		left: 5%;
	}

	.lines {
		display: inline-block;
		transform: translateY(-5px);
		width: 35rpx;
		height: 3rpx;
		background: #3d9c36;
		left: 5%;
		margin: 0 5px;
	}

	.building_text {
		width: 56px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 700;
		text-align: center;
		color: #333333;
		line-height: 14px;
		position: absolute;
		left: 9%;
	}

	.building_image {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10%;
		transform: translate(-15px, -5px);
	}

	.information {
		position: relative;
	}

	.information_item {
		margin-left: 220rpx;
		width: 220rpx;
		transform: translate(-60%);
		margin-top: 8px;
	}

	.information_item_txt {
		width: 110rpx;
		height: 40rpx;
		font-size: 20rpx;
		line-height: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		display: inline-block;
		text-align: left;
		color: #333333;

	}

	.information_item_txt:nth-child(2) {
		font-weight: 600;
		transform: translateX(20px);
	}

	.geographical_position image {
		width: 335px;
		height: 200px;
		border-radius: 6px;
		transform: translate(20px, 10px);
	}

	.example {
		position: relative;
		top: 15px;
		width: 100vw;
		flex-wrap: wrap;
		display: flex;

	}

	.example_item {
		width: 162px;
		height: 126px;
		margin-top: 10px;
		margin-left: 18px;
	}

	.example_item_image {
		width: 162px;
		height: 100px;
		border-radius:5px 5px 0 0;
	}

	.example_item_text {
		width: 163px;
		height: 20px;
		background: #ffffff;
		text-align: center;
		font-size: 14px;
		border-radius: 0px 0px 5px 5px;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
	}

	.appointment_button {
		width: 120px;
		height: 40px;
		line-height: 40px;
		margin-top: 20px;
		margin-bottom: 20px;
		background: #3d9c36;
		color: #fff;
		border-radius: 4px;
		bottom: 0;
	}
</style>
